<template>
    <a-drawer popup-container="#wrap" width="500px" :visible="show" :ok-loading="form.loading" @ok="submit"
        @cancel="show = false" unmountOnClose>
        <template #title>
            {{ $t('components.create.60zecmbl56w0') }}
        </template>
        <div class="table-info">
            <a-form ref="formRef" :model="form.data" @submit="submit" layout="vertical">
                <a-form-item field="districtId" :label="$t('components.create.60zecmbl7o00')" :rules="[{ type:'array', required: true, message: $t('components.create.60zecmbl7y40') }]">
                    <a-cascader path-mode v-model="form.data.districtId" :options="regionData"  :placeholder="$t('components.create.60zecmbl7y40')" />
                </a-form-item>
                <a-form-item field="deviceId" :label="$t('components.create.60zecmbl56w4')" :rules="[{ required: true, message: $t('components.create.60zecmbl56w4') }]">
                    <a-input v-model="form.data.deviceId" :placeholder="$t('components.create.60zecmbl56w4')" />
                </a-form-item>
                <a-form-item field="providerCode" :label="$t('components.create.60zecmbl56w6')" :rules="[{ required: true, message: $t('components.create.60zecmbl56w7') }]">
                    <a-input v-model="form.data.providerCode" :placeholder="$t('components.create.60zecmbl56w7')" />
                </a-form-item>
                <a-form-item field="deviceName" :label="$t('components.create.60zecmbl84c0')"
                    :rules="[{ required: true, message: $t('components.create.60zecmbl8as0') }]">
                    <a-input v-model="form.data.deviceName" :placeholder="$t('components.create.60zecmbl8as0')" />
                </a-form-item>
                <a-form-item field="typeId" :label="$t('components.create.60zecmbl8xk0')">
                    <a-select :placeholder="$t('components.create.60zecmbl94o0')" v-model="form.data.typeId">
                        <a-option v-for="item in temp.fiveGAdeviceTypeList" :value="item.id">{{ item.name }}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item field="point" :label="$t('components.create.60zecmbl98w0')"
                    :rules="[{ required: true, message: $t('components.create.60zehwan9a81') }]">
                    <a-select v-model="form.data.point" :loading="form.point.loading"
                        :placeholder="$t('components.create.60zehwan9a81')" @search="searchPoint" :filter-option="false"
                        allow-search>
                        <a-option v-for="item of form.point.list" :value="item.id">{{ item.name }}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item field="radius" :label="$t('components.create.60zecmbl9qw0')" v-model="form.data.radius"
                    :rules="[{ type: 'number', min: 0 }]">
                    <a-input-number v-model="form.data.radius" :placeholder="$t('components.create.60zecmbl9mc0')">
                        <template #suffix>
                            {{ $t('components.create.60zecmbl9qw0') }}
                        </template>
                    </a-input-number>
                </a-form-item>
                <a-form-item field="deviceAltitude" :label="$t('components.create.60zecmbl56w8')" v-model="form.data.deviceAltitude"
                    :rules="[{ type: 'number', min: 0 }]">
                    <a-input-number v-model="form.data.deviceAltitude" :placeholder="$t('components.create.60zecmbl56w9')">
                        <template #suffix>
                            {{$t('components.create.60zecmbl56w9')}}
                        </template>
                    </a-input-number>
                </a-form-item>
            </a-form>
        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { defineModel } from 'vue'
import { apifiveGADeviceCreate } from '@/api/device'
import {regionData,codeToText} from "element-china-area-data";
const temp = useTemp()
const local = useLocal()

const show = defineModel('show', { default: false })
const formRef = ref()
const emit = defineEmits(['refresh'])
const form = reactive({
    data: {
        // point: `point:"${form.data.deviceLatitude},${form.data.deviceAltitude}"`,
        point: "",
        address: 0,
        deviceId: "",
        deviceName: "",
        province: 0,
        providerCode: "",
        deviceLongitude: 0,
        deviceLatitude: 0,
        deviceAltitude: 0,
        typeId: '',
        typeName: '',
        radius: 1300,
        deviceType: 0,
        district: "",
        districtId: '',
        workState: 0,
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id,
        // mac:['','','']
    },
    point: {
        list: [] as any,
        loading: false
    },
    loading: false,
})
const submit = async () => {
    const validate = await formRef.value?.validate()
    if (validate) return;
    form.loading = true
    const point = form.point.list?.find((item: any) => item.id == form.data.point)
    const { code } = await apifiveGADeviceCreate({
        ...form.data,
        point: point.location,
        deviceLongitude: point.location.split(',').map(Number)[0],
        deviceLatitude: point.location.split(',').map(Number)[1],
        deviceAltitude: Number(form.data.deviceAltitude),
        address: point.name,
        provinceId: Number(form.data.districtId[0]),
        cityId: Number(form.data.districtId[1]),
        districtId: Number(form.data.districtId[2]),
        province: codeToText[form.data.districtId[0]],
        city: codeToText[form.data.districtId[1]],
        district: codeToText[form.data.districtId[2]],
        // groupName:temp.deviceGroupList?.find((item:any)=>item.id == form.data.groupId)?.name,
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id,
        // mac:JSON.stringify(form.data.mac)
    })
    form.loading = false
    if (code != 200) return;
    emit('refresh')
    formRef.value?.resetFields()
    show.value = false
}
// 搜索中心点
const searchPoint = async (keywords: string) => {
    if (!keywords) return;
    form.point.loading = true
    const { code, data } = await apiAmapCityByKeyword({
        keywords
        // cityName: codeToText[form.data.districtId[1]]
    })
    form.point.loading = false
    if (code != 200) return;
    form.point.list = data.list
}
</script>

<style scoped></style>